<template>
	<view class="ys">
		<view class="login">
			<view class="top">
				<image class="bg" src="/static/img/loginbg.png" mode="widthFix"></image>
				<view class="title">
					欢迎登录租房系统
				</view>
				<view class="btn">
					<view class="loginform">
						<view class="inputli">
							<text class="text">身份</text>
							<view class="selectbox">
								<uni-data-select v-model="value" :localdata="range" :clear="false"></uni-data-select>
							</view>
						</view>
					</view>
					<button v-if="!is_checked" @click="showTips">
						<!-- <image src="/static/img/wx.png" mode="widthFix"></image> -->
						手机号快捷登录
					</button>
					<button v-else open-type="getPhoneNumber" @getphonenumber="getphonenumber" :loading="loading"
						:disabled="loading">
						<!-- <image src="/static/img/wx.png" mode="widthFix"></image> -->
						手机号快捷登录
					</button>
					<!-- #ifdef H5 -->
					<!-- <view class="loginform">
						<view class="inputli">
							<input type="text" v-model="phone" placeholder="请输入您的手机号">
						</view>
						<view class="inputli">
							<input type="text" v-model="code" placeholder="请输入验证码">
							<text class="code" @click="SendCode" v-if="!is_send">获取验证码</text>
							<text class="code" v-else>{{time}}</text>
						</view>
						<button @click="login">
							登录
						</button>
					</view> -->
					<!-- #endif -->
				</view>
			</view>
			<view class="fot">
				<label @click="changeTips">
					<checkbox :checked="is_checked" />
					<view class="checkview">
						阅读并同意我们的<text @click.stop="toPage('./xieyi')">“服务条款与隐私协议”</text>以及个人信息保护
					</view>
				</label>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		wxLogin,
		getOpenid
	} from "@/api/login.js"
	import {
		bannerlist
	} from "@/api/api.js"
	export default {
		data() {
			return {
				is_checked: false,
				phone: '',
				code: '',
				timer: '',
				time: '',
				is_send: false,
				value: 1,
				range: [ //1:租户 2：房东 3：专管员
					{
						value: 1,
						text: "租户"
					},
					{
						value: 2,
						text: "房东"
					},
					{
						value: 3,
						text: "专管员"
					},
				],
				open_id: '',
				loading: false
			}
		},
		onLoad() {
			// let token = uni.getStorageSync('token')
			// if (token && token != '') {
			// 	console.log(token)
			// 	let role = this.$store.state.role
			// 	this.$store.dispatch('getRole', 1)
			// }
			this.getMpOpenid()
			// this.bannerlist()
		},
		methods: {
			bannerlist() {
				bannerlist().then(res => {
					if (res.code == 200) {
						uni.redirectTo({
							url: '/pages/tenant/index'
						})
					}
				})
			},
			getMpOpenid() {
				var that = this
				// #ifdef MP-WEIXIN
				uni.login({
					success(res) {
						getOpenid({
							code: res.code
						}).then(data => {
							if (data.code == 200) that.open_id = data.data
						})
					}
				})
				// #endif
			},
			showTips() {
				if (!this.is_checked) {
					return uni.$showMsg('请阅读协议')
				}
				if (this.value == '') {
					return uni.$showMsg('请选择身份')
				}
			},
			login() {
				uni.redirectTo({
					url: './identity'
				})
			},
			getPhone() {
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					})
					return false
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				return true
			},
			SendCode() {
				if (!this.getPhone()) {
					return false
				}
				this.is_send = false
				this.time = 60
				sendCode({
					phone: this.phone
				}).then(res => {
					uni.$showMsg(res.msg)
					if (res.code == 0) {
						this.timer = setInterval(() => {
							this.time--;
							if (this.time < 0) {
								clearInterval(this.timer)
								this.is_send = true
							}
						}, 1000)
					}
				})
			},
			changeTips() {
				this.is_checked = !this.is_checked
			},
			getphonenumber(e) {
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.loading = true
					let encryptedData = e.detail.encryptedData
					let errMsg = e.detail.errMsg
					let iv = e.detail.iv
					let code = e.detail.code
					wxLogin({
						openId: this.open_id,
						code,
						userType: this.value
					}).then(res => {
						if (res.code == 200) {
							uni.setStorageSync('token', res.data)
							uni.setStorageSync('usertype', this.value)
							uni.reLaunch({
								url: `/pages/tenant/index`
							})
						} else {
							this.loading = false
							uni.$showMsg(res.msg)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding: 10vh 0;
		box-sizing: border-box;
	}

	.login {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		height: 80vh;

		.top {
			width: 80%;
			text-align: center;
		}

		.bg {
			width: 80%;
		}

		.title {
			text-align: center;
			font-size: 17px;
			margin-top: 10%;
			letter-spacing: 1px;
			font-weight: bold;
		}

		.btn {
			margin-top: 20%;

			button {
				background: #FF9365;
				color: #fff;
				font-size: 15px;
				border-radius: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 45px;
			}

			image {
				width: 20px;
				margin-right: 10px;
			}
		}

		.fot {
			width: 85%;

			label {
				display: flex;
				align-items: flex-start;
				font-size: 14px;

				checkbox {
					transform: scale(.65);
				}

				.checkview {
					text-align: center;
					color: #A6A6A6;

					text {
						color: #FF9365;
					}
				}
			}
		}
	}

	.loginform {
		text-align: left;
		margin-top: -10%;

		.inputli {
			border-radius: 8px;
			// background: #E5E5E566;
			width: 100%;
			padding: 15px 10px;
			box-sizing: border-box;
			margin: 10px auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			color: #808080;

			.text {
				display: block;
				width: 50px;
			}

			.selectbox {
				width: calc(100% - 50px);
			}

			.icon {
				transition: .3s;

				&.active {
					transform: rotate(180deg);
				}
			}

			input {
				flex: 1;
				font-size: 14px;
			}

			.code {
				display: block;
				width: 80px;
				color: #397ef5;
				text-align: center;
				font-size: 14px;
			}
		}

		button {
			margin-top: 20px;
		}
	}
</style>